<template>
	<div class="search">
		<el-select
			v-model="productName"
			class="m-2"
			placeholder="请选择产品名称"
			clearable
		>
			<el-option
				v-for="item in productList"
				:key="item.objectId"
				:label="item.name"
				:value="item.name"
			/>
		</el-select>
		<el-select
			v-model="accep"
			class="m-2"
			placeholder="请选择受理详情"
			clearable
		>
			<el-option
				v-for="item in accepList"
				:key="item.value"
				:label="item.label"
				:value="item.value"
			/>
		</el-select>
		<el-button
			type="primary"
			size="default"
			@click="handleSearch"
			color="#2864fa"
			>搜索</el-button
		>
	</div>
	<el-table :data="tableData" style="width: 99%" border>
		<el-table-column label="序号" prop="name">
			<template #default="scope">
				<span> {{ scope.$index + 1 }} </span>
			</template>
		</el-table-column>
		<el-table-column label="用户名称" prop="username">
			<template #default="scope">
				<span>{{ scope.row.username }}</span>
			</template>
		</el-table-column>
		<el-table-column label="产品名称" prop="productName">
			<template #default="scope">
				<span>{{
					scope.row.productName ? scope.row.productName : "暂无申请"
				}}</span>
			</template>
		</el-table-column>
		<el-table-column label="受理详情" prop="acce">
			<template #default="scope">
				<span>{{ scope.row.acce ? scope.row.acce : "暂无申请" }}</span>
			</template>
		</el-table-column>
		<el-table-column label="注册时间" prop="time">
			<template #default="scope">
				<span>{{
					scope.row.createdAt.slice(0, 10)
						? scope.row.createdAt.slice(0, 10)
						: "暂无申请"
				}}</span>
			</template>
		</el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button
					size="small"
					type="primary"
					@click="handleLook(scope.$index, scope.row)"
					>查看申请详情</el-button
				>
				<el-button
					size="small"
					type="primary"
					@click="handleDelete(scope.$index, scope.row)"
					>删除用户</el-button
				>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination
		layout="total, prev, pager, next, jumper"
		:total="total"
		@current-change="handleChange"
	/>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { userProductGet } from "../../api/product";
import { userLook } from "../../api/user";
import { useRouter } from "vue-router";
import { productApplyGet } from "../../api/productApply";

const router = useRouter();

let tableData = ref([]);
let total = ref<number>(0);

userLook(1).then((res) => {
	tableData.value = res.data.results;
	total.value = res.data.count;
	productApplyGet().then((res1) => {
		console.log(res1.data.results);
	});
});

//受理详情数据
let accep = ref("");
let productName = ref("");
const accepList = [
	{
		value: "待受理",
		label: "待受理",
	},
	{
		value: "已受理",
		label: "已受理",
	},
];
//产品名称数据
let productList = ref<any>();
userProductGet(1).then((res) => {
	productList.value = res.data.results;
});

//搜索
const handleSearch = () => {};

//查看
const handleLook = (index: number, row: any) => {
	router.push({
		path: "/orders/perDetail",
		query: { username: row.username },
	});
};

//删除
const handleDelete = (index: number, row: any) => {};

//分页按钮
const handleChange = (num: number) => {
	userLook(num).then((res) => {
		tableData.value = res.data.results;
		total.value = res.data.count;
	});
};
</script>

<style scoped>
.el-select {
	margin-right: 10px;
	width: 212px;
}
.search {
	margin-bottom: 10px;
}
:deep(.cell) {
	text-align: center;
}
.label {
	border-radius: 4px;
	background-color: #ecf7fd;
	color: #268be9;
	margin: 0;
	padding: 5px 10px;
	margin-bottom: 5px;
}
</style>
